<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <style>
        .pre{
            cursor: not-allowed;
        }
        .page{
            background-color: #fd8d27;
            color: #ffffff;
        }
        .behind{
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <button id="pre" onclick="pre()">&lt;</button>
    <button id="fir" onclick="one()">1</button>
    <button id="sec" onclick="two()">2</button>
    <button id="thi" onclick="three()">3</button>
    <button id="beh" onclick="beh()">&gt;</button>
    <script>
        // let a = document.getElementById("fir");
        // let b = document.getElementById("sec");
        // let c = document.getElementById("thi");
        function pre(){
            let a = document.getElementById("fir");
            let b = document.getElementById("sec");
            let c = document.getElementById("thi");
            if(a.classList.contains('page')){
                document.getElementById("pre").classList.add('pre');
            }else if(b.classList.contains('page')){
                document.getElementById("sec").classList.remove('page');
                document.getElementById("fir").classList.add('page');
                document.getElementById("pre").classList.remove('pre');
            }else if(c.classList.contains('page')){
                document.getElementById("sec").classList.add('page'); 
                document.getElementById("thi").classList.remove('page');
                document.getElementById("pre").classList.remove('pre');
            }
        }

        function one(){
                document.getElementById("sec").classList.remove('page'); 
                document.getElementById("thi").classList.remove('page'); 
                document.getElementById("fir").classList.add('page');
                document.getElementById("pre").classList.add('pre');
                document.getElementById("beh").classList.remove('behind');
            }
       
        function two(){
                document.getElementById("sec").classList.add('page'); 
                document.getElementById("thi").classList.remove('page'); 
                document.getElementById("fir").classList.remove('page');
                document.getElementById("pre").classList.remove('pre');
                document.getElementById("beh").classList.remove('behind');
        }

        function three(){
                document.getElementById("sec").classList.remove('page');
                document.getElementById("fir").classList.remove('page');
                document.getElementById("thi").classList.add('page');
                document.getElementById("pre").classList.remove('pre');
                document.getElementById("beh").classList.add('behind');
        }

        function beh(){
            let a = document.getElementById("fir");
            let b = document.getElementById("sec");
            let c = document.getElementById("thi");
            if(c.classList.contains('page')){
                document.getElementById("beh").classList.add('behind');
            }else if(a.classList.contains('page')){
                document.getElementById("beh").classList.remove('behind');
                document.getElementById("sec").classList.add('page');
                document.getElementById("fir").classList.remove('page');
            }else if(b.classList.contains('page')){
                document.getElementById("beh").classList.remove('behind');
                document.getElementById("sec").classList.remove('page'); 
                document.getElementById("thi").classList.add('page');
            }
        }
    </script>
</body>
</html>